<template>
    <div class="ksh jt_ksh">
        <div class="bg">
            <div class="mapBg"></div>
        </div>
        <div class="head">
            <div class="logoGrid">
                <img :src="require('@/assets/images/gridding/logotxt.png')" />
            </div>
        </div>
        <div class="main">
            <div class="datason">
                <ul class="clear">
                    <li>
                        <div class="imgbn">
                            <img class="spiny" :src="require('@/assets/images/gridding/ii1.png')">
                        </div>
                        <div class="txtbn">
                            <span>13<sub>个</sub></span>
                            <p>部门总数</p>
                        </div>
                    </li>
                    <li>
                        <div class="imgbn">
                            <img class="spiny" :src="require('@/assets/images/gridding/ii2.png')">
                        </div>
                        <div class="txtbn">
                            <span>78<sub>个</sub></span>
                            <p>资源总数</p>
                        </div>
                    </li>
                    <li>
                        <div class="imgbn">
                            <img class="spiny" :src="require('@/assets/images/gridding/ii3.png')">
                        </div>
                        <div class="txtbn">
                            <span>1838<sub>条</sub></span>
                            <p>数据项总数</p>
                        </div>
                    </li>
                    <li>
                        <div class="imgbn">
                            <img class="spiny" :src="require('@/assets/images/gridding/ii4.png')">
                        </div>
                        <div class="txtbn">
                            <span>19694747<sub>条</sub></span>
                            <p>数据量总数</p>
                        </div>
                    </li>
                    <li>
                        <div class="imgbn">
                            <img class="spiny" :src="require('@/assets/images/gridding/ii5.png')">
                        </div>
                        <div class="txtbn">
                            <span>2<sub>个</sub></span>
                            <p>接口总数</p>
                        </div>
                    </li>
                </ul>

                <ul class="clear" style="padding: 0 10px;">
                    <li>
                        <div class="nox">
                            <div class="boximg">
                                <img :src="require('@/assets/images/gridding/vb1.png')">
                            </div>
                            <div class="boxtxt">
                                <span>8365604<sub>条</sub></span>
                                <p>人口数据</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="nox">
                            <div class="boximg">
                                <img :src="require('@/assets/images/gridding/vb2.png')">
                            </div>
                            <div class="boxtxt">
                                <span>77474<sub>条</sub></span>
                                <p>特殊人群数据</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="nox">
                            <div class="boximg">
                                <img :src="require('@/assets/images/gridding/vb3.png')">
                            </div>
                            <div class="boxtxt">
                                <span>480917<sub>条</sub></span>
                                <p>法人数据</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="nox">
                            <div class="boximg">
                                <img :src="require('@/assets/images/gridding/vb4.png')">
                            </div>
                            <div class="boxtxt">
                                <span>691141<sub>条</sub></span>
                                <p>企业数据</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="nox">
                            <div class="boximg">
                                <img :src="require('@/assets/images/gridding/vb5.png')">
                            </div>
                            <div class="boxtxt">
                                <span>243235<sub>条</sub></span>
                                <p>案件信息</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="itemBox" style="width: 75%;padding: 0;font-size: 0;">
                <div class="itemBox mB20" style="width: 33%">
                    <h1 class="title_big mB20">
                        <span>部门数据总览</span>
                    </h1>
                    <div class="tableCon">
                        <table class="tableA">
                            <tr>
                                <th>部门</th>
                                <th>资源目录</th>
                                <th>数据项</th>
                                <th>数据量</th>
                            </tr>
                        </table>
                        <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
                            <ul>
                                <li v-for="(item,index) in listData">
                                    <table class="tableA">
                                        <tr>
                                            <td>公安局</td>
                                            <td class="yellow">{{index + 1}}</td>
                                            <td class="yellow">54</td>
                                            <td class="green">8365607</td>
                                        </tr>
                                    </table>
                                </li>
                                
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>

                <div class="itemBox mB20" style="width: 67%">
                    <h1 class="title_big mB10">
                        <span>人口分布情况</span>
                    </h1>
                    <div>
                        <div class="tubiao">
                            <EchartBarD height="300px" :color="['#33d3ff','#00a2ff']" />
                        </div>
                    </div>
                </div>

                <div class="itemBox" style="width: 33%">
                    <h1 class="title_big mB10">
                        <span>重点人员数据统计</span>
                    </h1>
                    <div class="halfCon mT20">
                        <div class="tubiao" style="width: 40%">
                            <div class="dp_ech-bg distable" style="height: 225px;">
                                <i class="sbt_sv spin"></i>
                                <div class="discell">
                                    <p></p>
                                </div>
                            </div>
                            <EchartPieC height="225px" />
                        </div>
                        <div style="width: 55%;padding-left: 4%;">
                            <ul class="pieLeng1">
                                <li>
                                    <i style="background:#0fb1f4"></i> 艾滋病人
                                    <p><span style="color:#0fb1f4;">5040</span><sub>人</sub></p>
                                </li>
                                <li>
                                    <i style="background:#1fd496"></i> 精神病人
                                    <p><span style="color:#1fd496;">7587</span><sub>人</sub></p>
                                </li>
                                <li>
                                    <i style="background:#ffba00"></i> 社区矫正人员（在册）
                                    <p><span style="color:#ffba00;">2574</span><sub>人</sub></p>
                                </li>
                                <li>
                                    <i style="background:#9870ff"></i> 社区矫正人员（解矫）
                                    <p><span style="color:#9870ff;">9002</span><sub>人</sub></p>
                                </li>
                                <li>
                                    <i style="background:#fa8d3d"></i> 戒毒人员
                                    <p><span style="color:#fa8d3d;">858</span><sub>人</sub></p>
                                </li>
                                <li>
                                    <i style="background:#5c77ff"></i> 流浪乞讨人员
                                    <p><span style="color:#5c77ff;">16629</span><sub>人</sub></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="itemBox" style="width: 67%">
                    <h1 class="title_big mB10">
                        <span>矛盾事件分布情况</span>
                    </h1>
                    <div>
                        <div class="tubiao">
                            <EchartBarD height="280px" :color="['#8bffd7','#1fd496']" />
                        </div>
                    </div>
                </div>

            </div>

            <div class="itemBox mB20" style="width: 25%">
                <h1 class="title_big mB10">
                    <span>矛盾类型统计</span>
                </h1>
                <div class="tableCon sda">
                    <table class="tableA">
                        <tr>
                            <th>类型</th>
                            <th>2020</th>
                            <th>2021</th>
                            <th>2022</th>
                        </tr>
                    </table>
                    <vue-seamless-scroll :data="listData2" :class-option="optionHover" class="seamless-warp2">
                        <ul>
                            <li v-for="(item,index) in listData2">
                                <table class="tableA">
                                    <tr>
                                        <td>公安局</td>
                                        <td class="yellow">{{index + 1}}</td>
                                        <td class="yellow">54</td>
                                        <td class="yellow">8365607</td>
                                    </tr>
                                </table>
                            </li>
                            
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import EchartBarD from '@/components/echarts/echart_barD.vue';
import EchartPieC from '@/components/echarts/echart_pieC.vue';

export default {
    components: {
        EchartBarD,
        EchartPieC
    },
    data() {
        return{
            listData: [
                {},{},{},{},{},{},{},{},{}
            ],
            listData2: [
                {},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}
            ]
        }
    },
    computed: {
        optionHover () {
            return {
                singleHeight: 40,
                waitTime: 2500
            }
        }
    }
}
</script>

<style lang="less" scoped>
.ksh {
    height: 1080px;
    width: 1920px;
    position: relative;
}

.ksh > .bg {
    background: url(~@/assets/images/gridding/bg.jpg) no-repeat center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}

.bg .mapBg {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -550px;
    transform: translate(-50%, 0);
    width: 100%;
    height: 1100px;
}

.bg .mapBg i {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background: url(~@/assets/images/gridding/bgCenter.png) no-repeat center;
    animation: 30s linear 0s normal infinite running spin;
}

.head {
    height: 91px;
    width: 1920px;
    margin: 0px auto;
    text-align: center;
    position: relative;
    z-index: 99;
}

.head .logoGrid {
    position: absolute;
    height: 91px;
    width: 100%;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    background: url(~@/assets/images/gridding/logo.png) no-repeat top center;
    z-index: 10;
}

.main {
    text-align: center;
    font-size: 0;
    position: relative;
}

.datason {
    padding: 10px 0;
}

.datason ul {
    margin: 10px 0;
}

.datason li {
    width: 20%;
    float: left;
    padding: 15px 0;
}

.datason li .nox {
    height: 90px;
    background: url(~@/assets/images/gridding/dsa.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
}

.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clear { *zoom: 1;}

.imgbn,
.txtbn {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.imgbn {
    background: url(~@/assets/images/gridding/shuBox.png);
    width: 89px;
    height: 72px;
    text-align: center;
}

.txtbn {
    color: #fff;
}

.txtbn span {
    display: inline-block;
    font-size: 30px;
    font-family: 'Bahnschrift';
    background-image: -webkit-linear-gradient(top, #f9e468, #f7bf29);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.txtbn p {
    font-size: 16px;
}

.boximg {
    position: relative;
    width: 66px;
    height: 66px;
    text-align: center;
}

.boximg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(~@/assets/images/gridding/cuio.png);
    animation: 5s linear 0s normal infinite running spin;
}

.boxtxt {
    color: #fff;
    text-align: left;
}

.boxtxt p {
    font-size: 16px;
}

.boxtxt span {
    display: inline-block;
    font-size: 24px;
    font-family: 'Bahnschrift';
    background-image: -webkit-linear-gradient(top, #99efff, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.spiny {
    animation: 6s linear 0s infinite normal none running spiny;
}
@keyframes spiny {
    0% {
        transform: rotateY(0deg);
    }

    20% {
        transform: rotateY(180deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    70% {
        transform: rotateY(359deg);
    }

    100% {
        transform: rotateY(359deg);
    }
}

.spin { animation: 3s linear 0s normal infinite running spin;}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

.itemBox {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: 14px;
    padding: 0 20px;
    box-sizing: border-box;
}

.title_big {
    line-height: 40px;
    position: relative;
}

.title_big span {
    font-weight: bold;
    padding-right: 10px;
    background-image: -webkit-linear-gradient(top, #fff, #02ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25px;
    font-style: italic;
    display: inline-block;
    position: relative;
    padding-left: 30px;
}

.title_big span::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(~@/assets/images/gridding/tit-small.png) no-repeat left bottom;
    left: 0px;
    top: 0px;
    z-index: 9;
}

.title_big span::after {
    content: '';
    display: block;
    position: absolute;
    width: 232px;
    height: 100%;
    background: url(~@/assets/images/gridding/tit-small-r.png) no-repeat left bottom;
    left: 100%;
    top: -3px;
    z-index: 9;
}

.title_big::before {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 300px);
    height: 1px;
    background: #0291b4;
    left: 300px;
    top: 11px;
}

.title_big::after {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background: #0291b4;
    right: -8px;
    top: 4px;
    background: url(~@/assets/images/gridding/tit_d.png) no-repeat right center;
}

.title_big.l::before {
    width: calc(100% - 400px);
    left: 400px;
}

.title_big.l span::after {
    width: 90px;
}

.title_big.ll::before {
    width: calc(100% - 500px);
    left: 500px;
}

.tableCon {
    background: rgba(2, 59, 122, 0.45);
    box-shadow: 0px 0px 10px rgba(14, 200, 255, 0.8) inset;
    width: 100%;
}

.seamless-warp {
  height: 240px;
  overflow: hidden;
}

.seamless-warp2 {
  height: 585px;
  overflow: hidden;
}

.tableA {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.tableA th {
    border-bottom: 1px solid #0461bf;
    color: #70f3ff;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
    padding: 10px 0px;
}

.tableA td {
    border-top: 1px dashed #0461bf;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
    padding: 8px 0px;
    color: #fff;
}

.tableA td.yellow {
    color: #f2d90a;
}

.tableA td.green {
    color: #06f6b7;
}

.tableA th:nth-of-type(1),
.tableA td:nth-of-type(1) {
    width: 40%
}

.tableA th:nth-of-type(2),
.tableA td:nth-of-type(2) {
    width: 20%
}

.tableA th:nth-of-type(3),
.tableA td:nth-of-type(3) {
    width: 15%
}

.tableA th:nth-of-type(4),
.tableA td:nth-of-type(4) {
    width: 25%
}

.sda .tableA th:nth-of-type(1),
.sda .tableA td:nth-of-type(1) {
    width: 40%
}

.sda .tableA th:nth-of-type(2),
.sda .tableA td:nth-of-type(2) {
    width: 20%
}

.sda .tableA th:nth-of-type(3),
.sda .tableA td:nth-of-type(3) {
    width: 20%
}

.sda .tableA th:nth-of-type(4),
.sda .tableA td:nth-of-type(4) {
    width: 20%
}

.pieLeng1 {
    position: relative;
}

.pieLeng1 li {
    display: block;
    line-height: 18px;
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
}

.pieLeng1 li i {
    height: 16px;
    display: inline-block;
    width: 3px;
    vertical-align: top;
    margin-right: 4px;
}

.pieLeng1 li p {
    float: right;
    font-size: 16px;
    color: #1366c0;
}

.pieLeng1 li p span {
    color: #fff;
    font-family: 'Bahnschrift';
    font-size: 17px;
}

.pieLeng1 li p sub {
    color: #fff;
}

.halfCon > div {
    display: inline-block;
    width: 49%;
    vertical-align: middle;
}

.sbt_sv {
    background: url(~@/assets/images/gridding/bgEchart.png);
    background-size: 100% 100%;
}

.spiny {
    animation: 6s linear 0s infinite normal none running spiny;
}

@keyframes spiny {
    0% {
        transform: rotateY(0deg);
    }

    20% {
        transform: rotateY(180deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    70% {
        transform: rotateY(359deg);
    }

    100% {
        transform: rotateY(359deg);
    }
}

.tubiao {
    position: relative;
}
.dp_ech-bg { position: absolute; height: 100%; width: 100%; text-align: center; background-size: auto 100%;}
.sbt_sv { width: 183px; height: 183px; display: block; position: absolute; top: 50%; left: 50%; margin-left: -92px; margin-top: -92px; animation-duration: 20s;}

.distable { display: table; height: 100%;}
</style>